import React, { Component } from 'react';
import { FormControl, Button, Table, Radio} from 'tinper-bee';
import { searchAddParticipantList } from './workarchives.config.js';
import './EnterpriseModalContent.less';
import moment from 'moment';
moment.locale('zh-cn');

export default class EnterpriseModalContent extends Component {
	constructor (props){
		super(props);
		this.state = {
			chooseIndexValue: 10,
			enterpriseText: '',
			enterpriseList: []
		}
	}
	componentDidMount () {
	}
	handlerChooseThirdWay = value => () => {
		let saveEnterpriseRole = this.props.saveEnterpriseRole;
		if(saveEnterpriseRole){
			saveEnterpriseRole(value);
		}
		this.setState({
			chooseIndexValue: value
		});
	}
	handlerSaveEnterpriseText = (e)=>{
		let value = e.target.value;
		this.setState({
			enterpriseText: value
		});
	}
	handlerSeachEnterprise = () => {
		searchAddParticipantList({keyword: this.state.enterpriseText},
			res=>{
				let data = res.data.result;
				this.setState({
					enterpriseList: data
				});
			},
			error=>{}
		)
	}
	handlerChooseEnterpriseItem = (item, index) => () => {
		let saveEnterpriseItem = this.props.saveEnterpriseItem;
		if(saveEnterpriseItem){
			saveEnterpriseItem(item)
		}
		this.setState({
			enterpriseList: [],
			enterpriseText: item.name
		});
	}
	render (){
		return (
			<div className="enterprise--tab">
				<div className="tab--header">
					<ul className="clearfix">
						<li>
							<a href="javascript:;" onClick={this.handlerChooseThirdWay(10)} className={this.state.chooseIndexValue === 10 ? 'active' : ''}>业主方</a>
						</li>
						<li>
							<a href="javascript:;" onClick={this.handlerChooseThirdWay(20)} className={this.state.chooseIndexValue === 20 ? 'active' : ''}>施工方</a>
						</li>
						<li>
							<a href="javascript:;" onClick={this.handlerChooseThirdWay(30)} className={this.state.chooseIndexValue === 30 ? 'active' : ''}>监理方</a>
						</li>
					</ul>
				</div>
				<div className="tab--content">
					<div className="search-group clearfix">
						<FormControl size="lg" placeholder={`请输入姓名、电话、邮箱`} onChange={this.handlerSaveEnterpriseText} value={this.state.enterpriseText}/>
						<a href="javascript:;" className="search-btn" onClick={this.handlerSeachEnterprise}></a>
					</div>
					{	this.state.enterpriseList.length !== 0 && 
						<ul className="enterprise--list">
							{
								this.state.enterpriseList.map((item, index)=>{
									return <li>
											<a href="javascript:;" title={item.name} onClick={this.handlerChooseEnterpriseItem(item, index)}>{item.name}</a>
										</li>
								})
							}
						</ul>
					}
				</div>
			</div>
			)
	}
}